<template>
  <view>
    <u-card :border="false" box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0 30rpx' }"
      :head-style="{ padding: '28rpx 30rpx 10rpx' }" :head-border-bottom="false">
      <view slot="head">
        <view class="card-row u-flex head">
          <u-section title="人员配备" color="#014833" font-size="32" sub-title="更多" :right="showRight"
            @click="goPersonnel"></u-section>
        </view>
      </view>
      <view slot="body">
        <view class="card-row u-p-t-10 u-p-b-20">
          <view class="body-cont w-100p">
            <h4>中级职称以上人数占比</h4>
            <view class="charts-box u-m-t-10">
              <qiun-data-charts  type="arcbar" :opts="opts"
                :chartData="rankChartData" />
            </view>

            <div class=" jszc-tag">
                <div class="left">
                  <span class="tag"></span>
                  <span class="level">中级职称以上:</span>
                  <span class="num">{{dataObj.technicalTitle}}人</span>
                </div>
                <div class="right">
                  <span class="tag"></span>
                  <span class="level">专业技术人员:</span>
                  <span class="num">{{dataObj.total}}人</span>
                </div>
              </div>
          </view>

          <view class="body-cont w-100p u-m-t-24">
            <h4>中专以上人数占比</h4>
            <view class="charts-box u-m-t-10">
              <qiun-data-charts  type="arcbar" :opts="opts1" :chartData="chartData" />
            </view>

            <div class=" jszc-tag ">
                <div class="left">
                  <span class="tag tag1"></span>
                  <span class="level">中专以上:</span>
                  <span class="num">{{dataObj.education}}人</span>
                </div>
                <div class="right">
                  <span class="tag"></span>
                  <span class="level">专业技术人员:</span>
                  <span class="num">{{dataObj.total}}人</span>
                </div>
              </div>
          </view>
        </view>
      </view>
    </u-card>
  </view>
</template>
<script>
export default {
  watch: {
    'customerNo': {
      immediate: true,
      handler: function (newval) {
        
        if (newval) {
          this.getServerData();
        }
      },
    },
  },
  props: {
    customerNo: {
      type: String,
      default: ''
    },
    showRight: {
      type: Boolean,
      default: true
    },
  },
  data () {
    return {
      dataObj:{},
      opts: {
        color: ["#369164"],
        padding: undefined,
        title: {
          name: "0%",
          fontSize: 16,
          color: "#369164"
        },
        subtitle: {
          name: "中级职称以上人数占比",
          fontSize: 12,
          color: "#333"
        },
        extra: {
          arcbar: {
            type: "default",
            width: 8,
            backgroundColor: "#E9E9E9",
            startAngle: 0.75,
            endAngle: 0.25,
            gap: 2,
            linearType: "custom"
          }
        },
      },
      opts1: {
        color: ["#3784FF"],
        padding: undefined,
        title: {
          name: "0%",
          fontSize: 16,
          color: "#3784FF"
        },
        subtitle: {
          name: "中专以上人数占比",
          fontSize: 12,
          color: "#333"
        },
        extra: {
          arcbar: {
            type: "default",
            width: 8,
            backgroundColor: "#E9E9E9",
            startAngle: 0.75,
            endAngle: 0.25,
            gap: 2,
            linearType: "custom"
          }
        },
      },
      rankChartData: {
        series: []
      },
      chartData: {
        series: []
      }
    }
  },
  methods: {
    goPersonnel () {
      uni.navigateTo({
        url: `/pages/practitioner/personnelAllocationStatistics/index?customerNo=${this.customerNo}`
      })
    },
    getServerData () {
        this.$post(`/staffing/sum`,{customerNo:this.customerNo}).then(result => {
          if (result.body) {
            this.dataObj=result.body

            const {technicalTitle,education,total} = result.body
            let res = {
              series: [
                {
                  name: "中级职称以上人数占比",
                  color: "#369164",
                  data: technicalTitle/total
                }
              ]
            };
            const txt=(technicalTitle/total * 100).toFixed(2) + '%'
            if(txt.indexOf('NaN')==-1){
              this.opts.title.name=txt
            }
            
            this.rankChartData = JSON.parse(JSON.stringify(res));

            let res1 = {
              series: [
                {
                  name: "中专以上人数占比",
                  color: "#3784FF",
                  data: education/total
                }
              ]
            };

            const txt1=(education/total * 100).toFixed(2) + '%'
            if(txt1.indexOf('NaN')==-1){
              this.opts1.title.name=txt1
            }
            this.chartData = JSON.parse(JSON.stringify(res1));
          }
        })
    },
  },
  async onReady () {

  },
  created () {
    
  },
  onLoad () {

  }
}
</script>
<style lang="scss" scoped>
.head {
  padding-bottom: 24rpx;
  border-bottom: 2rpx solid #F6F6F6;
}

.body-cont {
  box-shadow: 0 0 18rpx 0 rgba($color: #014833, $alpha: 0.2);
  border-radius: 12rpx;
  padding: 20rpx;

  h4 {
    color: #333;
    font-size: 30rpx;
  }
}

.charts-box {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
  height: 170px;
}

.jszc-tag {
  display: flex;
  justify-content: space-between;

  .tag {
    width: 22px;
    height: 10px;
    border-radius: 11px;
    display: inline-block
  }

  .level {
    font-size: 12px;
    color: rgb(153, 153, 153);
    margin: 0 5px
  }

  .num {
    color: rgb(51, 51, 51)
  }

  .left {
    .tag {
      background: #369164
    }
    .tag1 {
      background: #3784FF
    }
  }

  .right {
    .tag {
      background: #E9E9E9
    }
  }
}
</style>